// 组件样式属性配置
export interface StylePropConfig {
  type: string;
  title: string;
  'x-component': string;
  'x-component-props'?: {
    placeholder?: string;
    min?: number;
    max?: number;
    step?: number;
    options?: { label: string; value: string | number }[];
    addon?: string;
    format?: string;
    optionType?: string;
    directions?: string[];
  };
  default?: string | number;
}

// 组件配置中的实际样式值接口
export interface ComponentStyle {
  width?: string;
  height?: string;
  padding?: string;
  margin?: string;
  textAlign?: string;
  background?: string;
  [key: string]: string | undefined;
}

// 组件配置接口
export interface ComponentConfig {
  id: string;
  label: string;
  field: string;
  config: {
    type: string;
    title?: string;
    'x-decorator'?: string;
    'x-component'?: string;
    'x-component-props'?: {
      placeholder?: string;
      style?: Record<string, StylePropConfig>;  // 样式属性配置
      [key: string]: any;  // 其他组件特有属性
    };
    'x-decorator-props'?: {
      labelWidth?: number | string;
      labelAlign?: 'left' | 'right';
      size?: 'small' | 'default' | 'large';
      [key: string]: any;
    };
  };
  icon: any;
}

// 画布中组件的接口
export interface DroppedComponent {
  id: string;
  parentId?: string | null;
  configData: {
    id: string;
    field: string;
    config: {
      type: string;
      title?: string;
      'x-decorator'?: string;
      'x-component'?: string;
      'x-component-props'?: {
        placeholder?: string;
        style?: ComponentStyle;
        onChange?: (e: any) => void;
        [key: string]: any;
      };
      'x-decorator-props'?: Record<string, any>;
      properties?: Record<string, any>;
    };
  };
}

export interface ComponentGroup {
  id: string;
  type: 'group';
  componentIds: string[];
} 